<template>
  <el-card>
    <Loading />
    <el-col :span="24">
      <el-card shadow="always" width="100%">
        本月参加教育时长:
        <span>{{ ProgressValue }}小时</span>
        <el-progress
          :percentage="ProgressValue/FullHours*100"
          :format="ProgressFormat"
          :color="customColorMethod"
        />
      </el-card>
    </el-col>
    <el-table :data="TableData" :span-method="arraySpanMethod" class="tab" border>
      <el-table-column label="序号" type="index" fixed="left" width="50">
        <template slot-scope="scope">
          <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" prop="date" width="120" />
      <el-table-column label="时间" width="200">
        <template slot-scope="props">
          <span>{{ props.row.stime +" 至 " + props.row.etime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时长" prop="timeLength" width="100" />
      <el-table-column label="类别" prop="category" width="100" />
      <el-table-column label="组织者" prop="host" width="150" />
      <el-table-column label="地点" prop="place" width="150" />
      <el-table-column label="主要内容" prop="cont" />
    </el-table>
    <Pagination :pagesetting.sync="page" :total-count="totalCount" />
  </el-card>
</template>
<script>
import { getPerEducationSitu, getPerEductionCount } from '@/api/zzxt'
export default {
  name: 'PersonStat',
  components: {
    Pagination: () => import('@/components/Pagination'),
    Loading: () => import('@/views/Loading')
  },
  data: () => ({
    loading: false,
    ProgressValue: 0,
    FullHours: 20.0,
    TableData: [],
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    query_api: {
      userId: '',
      monthNum: ''
    }
  }),
  watch: {
    page: {
      handler(val) {
        this.ReTableData()
      },
      deep: true
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      const currentDate = new Date()
      this.query_api.monthNum = currentDate.getMonth()
      const page = this.page
      getPerEducationSitu(Object.assign(this.query_api, { page })).then(
        data => {
          this.totalCount = data.totalCount
          this.TableData = data.list
        }
      )
      getPerEductionCount(this.query_api).then(data => {
        this.ProgressValue = data['0'].PerEducationCount
      })
    },
    ProgressFormat(percentage) {
      return percentage >= 100 ? '满' : `${percentage}%`
    },
    ProgressStatus(percentage) {
      return percentage === 100 ? 'success' : `warning`
    },
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#409eff'
      } else {
        return '#67c23a'
      }
    },
    ReTableData() {
      const page = this.page
      getPerEducationSitu(Object.assign(this.query_api, { page })).then(
        data => {
          this.totalCount = data.totalCount
          this.TableData = data.list
        }
      )
    }
  }
}
</script>
